<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head lang="en" th:replace="include/common/common :: commonHeader">
    <footer th:include="include/common/common :: layUiResource"></footer>
    <!--    <footer th:include="include/common/common :: bootstrapResource"></footer>-->
    <footer th:include="include/common/common :: blueCSSResource"></footer>
    <footer th:include="include/common/common :: zTreeCSSSource"></footer>
    <footer th:include="include/common/common :: zTreeJSSource"></footer>

    <script>

        layui.config({
            base: '/staticResource/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index' , 'laytpl' , 'form'] , function () {
            var layer = layui.layer
                ,element = layui.element
                ,admin = layui.admin
                ,form = layui.form
                ,$ = layui.jquery;

            element.render();

            let entityName = 'roleMenu'
                ,_iframe = entityName + "_form"
                ,treeSetting = {
                    check: {
                        enable: true//checkbox
                        ,chkStyle: "checkbox"//值为checkbox或者radio表示
                        ,chkboxType: {"Y": "ps", "N": "ps"}//表示父子节点的联动效果,这里设置不联动
                    },
                    // 回调定义
                    callback:{
                        beforeExpand:true,
                        // 禁止tree折叠/展开:true 允许展开，false 禁止展开
                        beforeCollapse:true,
                        // 鼠标单击 回调
                        // onClick:zTreeOnClick
                        //鼠标双击 回调
                        // onDblClick: zTreeOnDblClick
                    }
                }
                ,userTreeOptions = {
                    treeId: entityName + 'Tree'
                    ,isExpandAll : true
                    ,setting:treeSetting
                    ,extendData:{
                        id:$("#roleId").val()
                }
                    ,excludeCode:'roleId'
                    ,url:'/a/role/treeDataToMenu'
                };

            function loadTree(){
                $("#" + _iframe).empty();
                $.fn.zTree.destroy(userTreeOptions.treeId);
                $.fn.blueJs.zTreeTool.loadTree(userTreeOptions);
            };

            $(document).ready(function(){
                $.fn.blueJs.tools.formButtonItem(entityName);
                loadTree();
            });

            form.on('submit(roleMenuSave)',function () {
                let treeObj = $.fn.blueJs.zTreeTool.getTreeObj(userTreeOptions.treeId)
                    ,treeNodes = treeObj.getCheckedNodes(true)
                    ,menuList = {};

                $.each(treeNodes , function (index , value) {
                    menuList["idList["+index+"]"] = value.id;
                });

                let formId = $(this).attr("blue-form-id")
                    ,formUrl = $("#" + formId).attr("action")
                    ,roleId = $("#roleId").val()
                    ,jsonData = "id=" + roleId + "&type=menu"
                    ,msg = '';

                $.ajax({
                    type:'POST',
                    url:formUrl  + "?" + jsonData,
                    data:menuList,
                    async:false,
                    dataType:'text',
                    success:function (data) {
                        msg = data;
                    },
                    error:function () {

                    }
                });

                let type = 'saveMsg';
                //当你在iframe页面关闭自身时
                let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                $.fn.blueJs.tools.active[type].call(this , msg , index);
                return false;
            });

            //点击事件监听
            $(document).on('click' , function (event) {
                let targetId = event.target.id;
                let cancelBtn = entityName + "CancelBtn";
                if (targetId == cancelBtn){
                    let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                }
            });
        });


    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!--        左侧tree-->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    组织信息
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <form class="form-horizontal" id="roleMenuForm" th:object="${role}" method="post" action="/a/role/roleRelationSave">
                        <input type="hidden" name="id" id="roleId" th:field="*{id}"/>
                        <div id="roleMenuTree" class="ztree"></div>

                        <!--                        Form 按钮组-->
                        <div class="layui-form-item layui-layout-admin">
                            <div class="layui-input-block blue-form-button-item"></div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>